<template>
  <div class="sti-wood-trend">

    <div class="echart-container" id="echart-container" ref="myEcharts"></div>
  </div>
</template>

<script>
/* eslint-disable */
// import * as echarts from 'echarts'
export default {
  name: 'sti-wood-trend',
  props: ['dataValue'],
  data () {
    return {
      msg: 'this is test',
      option: {},
      charts: null,
      datalist: [],
      tempTime: []
    }
  },
  created () {
    this.tempTime = []
    this.datalist = []
    for (let key in this.dataValue) {
      this.tempTime.push(this.$moment(key * 1).format('MM/DD'))
      this.datalist.push(this.dataValue[key])
    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      let myChart = this.$echarts.init(document.getElementById('echart-container'))
      this.option = {
        title: {
            text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor: '#BAE1FF',
          textStyle: {
            color: '#2472B4'
          }
        },
        // backgroundColor: 'rgb(255,255,255)',
        itemStyle: {
          normal: {
            // 阴影的大小
            shadowBlur: 200,
            // 阴影水平方向上的偏移
            shadowOffsetX: 0,
            // 阴影垂直方向上的偏移
            shadowOffsetY: 0,
            // 阴影颜色
            shadowColor: 'rgba(0, 0, 0, 0.5)'

          }
        },
        legend: {
          top: 30,
          right: 30,
          borderColor: '#6699FF',// 边框颜色
          textStyle: {
              color: '#fff'          // 图例文字颜色
          },
          data: [{
            name: '全国感染主机数',
            icon: 'circle'
          }],
          itemWidth: 10,
          itemHeight: 10,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
          backgroundColor: 'rgba(0,0,0,0)'
        },
        xAxis: {
          type: 'category',
          data: this.tempTime,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontWeight : 'bolder',
              // shadowColor : '#f00', // 默认透明
              shadowBlur : 10,
              fontSize : 10
            }
          },
          splitLine: {
            lineStyle: {
              color: '#2C4474',
              type: 'solid',
              width: 1
            }
          },
          axisLine: {
            lineStyle: {
              color: '#2C4474',
              type: 'solid',
              width: 1
            }
          },
          axisLabel: {
            color: '#5ABDFF',
            fontSize: 14
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitNumber: 3,
          splitLine: {
            lineStyle: {
              color: '#2C4474',
              type: 'solid',
              width: 1
            }
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#5ABDFF',
            fontSize: 14,
            formatter: function (value, index) {
              if (value >= 10000000) {
                value = (value / 10000000) + '千万'
              }
              return value
            }
          },
          axisTick: {
            show: false
          }
        },
        color: ['#5ABDFF', '#0E575E', '#0A3265', '#2F7696', '#2391A0', '#2A5CA3', '#134381', '#11545C', '#8D4C62', '#8B7E6E'],
        series: [
          {
            name:'全国感染主机数',
            type:'line',
            stack: '',
            symbolSize: 6,
            data: this.datalist
          }
          ]
      }
      myChart.setOption(this.option)
    }
  }
}
/* eslint-disable */
</script>

<style lang="less">
.sti-wood-trend{
  width: 100%;
  height:100%;
  position: relative;
  .echart-container{
    width: 100%;
    height:200px;
    position: absolute;
    left:0%;
    top:-15%;
  }
}
</style>
